<template>
  <a-form auto-label-width layout="inline">
    <a-form-item label="是否显示">
      <a-switch size="small" v-model="option.yAxis.show" />
    </a-form-item>
    <a-form-item label="位置">
      <a-radio-group size="mini" v-model="option.yAxis.position" type="button">
        <a-radio value="left" label="左">左</a-radio>
        <a-radio value="right" label="右">右</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="是否反向">
      <a-switch size="small" v-model="option.yAxis.inverse" />
    </a-form-item>
    <a-form-item label="轴线">
      <a-switch size="small" v-model="option.yAxis.axisLine.show" />
    </a-form-item>
    <a-form-item label="刻度">
      <a-switch size="small" v-model="option.yAxis.axisTick.show" />
    </a-form-item>

    <div class="border-dashed border-2 ml-1 p-1">
      <a-form-item label="刻度标签">
        <a-switch size="small" v-model="option.yAxis.axisLabel.show" />
      </a-form-item>
      <template v-if="option.yAxis.axisLabel.show">
        <a-form-item label="标签旋转">
          <xiri-form option="number" v-model="option.yAxis.axisLabel.rotate" :min="-90" :max="90" />
        </a-form-item>
        <a-form-item label="距离">
          <xiri-form option="number" v-model="option.yAxis.axisLabel.margin" :min="0" :max="100" />
        </a-form-item>
        <a-form-item label="显示最大标签">
          <a-switch size="small" v-model="option.yAxis.axisLabel.showMaxLabel" />
        </a-form-item>
        <a-form-item label="字体颜色">
          <xiri-form option="color" v-model="option.yAxis.axisLabel.textStyle.color" />
        </a-form-item>
        <a-form-item label="字体大小">
          <xiri-form option="number" v-model="option.yAxis.axisLabel.textStyle.fontSize" :min="0" :max="100" />
        </a-form-item>
      </template>
    </div>
    <a-form-item label="网格线">
      <a-switch size="small" v-model="option.yAxis.splitLine.show" />
    </a-form-item>
  </a-form>
</template>
<script setup>
defineOptions({
  name: "echarts-yAxis"
})
const attrs = useAttrs()
const option = attrs.option
</script>
<style scoped lang="less">
.bi-bar {
  width: 100%;
  height: 100%;
}
</style>
